<template>
    <div class='home-container'>
        <SideNav :openeds="openeds" :activeTab="activeTab"></SideNav>
        <div class='right-container'>
            <Header class="header" :headerList="headerList"></Header>
            <div class="right-content white-color">
                <div class="add-title">
                    <img src="../../src/assets/img/welcome/add.png" alt="">
                    <span>新增讲师</span>
                </div>
                <div class="add-form-container">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="add-form">
                        <el-form-item label="账号" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="请输入账号">
                                <template slot="append">@{{schoolInfo.account}}</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" prop="realname">
                            <el-input v-model="ruleForm.realname" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="phone">
                            <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"></el-input>
                        </el-form-item>
                        <el-form-item label="身份" prop="type">
                            <el-radio-group v-model="ruleForm.type">
                                <el-radio label="1">管理员</el-radio>
                                <el-radio label="2">讲师</el-radio>
                                <el-radio label="3">助教</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="课程权限" prop="role">
                            <el-checkbox v-model="ruleForm.role" label="只看自己的课程" name="role" true-label="1"
                                false-label="-1"></el-checkbox>
                        </el-form-item>
                        <el-form-item label="状态" prop="state">
                            <el-select v-model="ruleForm.state" placeholder="请选择">
                                <el-option label="开放" value="1"></el-option>
                                <el-option label="未开放" value="-1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="btn-group">
                            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                            <el-button @click="$router.push('/teacherList')">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import Header from '../../src/components/Header'
import SideNav from '../../src/components/SideNav'
import {
    addTeacher,
    updateTeacher,
    getTeacherDetail
} from '@/api/teachList'
import {
    geSchoolInfo
} from '@/api/home'
export default {
    name: 'home',
    data() {
        var validatePhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('手机号不能为空'))
            } else {
                const reg = /^1[34578]\d{9}$/
                if (reg.test(value)) {
                    callback()
                } else {
                    return callback(new Error('请输入正确的手机号'))
                }
            }
        }
        return {
            headerList: ['会员', '讲师', '新增讲师'],
            openeds: ['3', '3-1'],
            activeTab: 'Member',
            ruleForm: {
                name: '',
                password: '',
                realname: '',
                phone: '',
                type: '',
                state: '',
                role: ''
            },
            rules: {
                name: [{
                    required: true,
                    message: '请填写账号',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '请填写密码',
                    trigger: 'blur'
                },
                {
                    min: 3,
                    max: 8,
                    message: '密码长度必须是3-8位',
                    trigger: 'change'
                }
                ],
                realname: [{
                    required: true,
                    message: '请填写姓名',
                    trigger: 'blur'
                }],
                phone: [{
                    required: true,
                    validator: validatePhone,
                    trigger: 'blur'
                }],
                type: [{
                    required: true,
                    message: '请选择身份',
                    trigger: 'change'
                }],
                state: [{
                    required: true,
                    message: '请选择状态',
                    trigger: 'change'
                }],
                role: [{
                    required: false,
                    message: '请选择课程权限',
                    trigger: 'change'
                }]
            },
            id: this.$route.query.id,
            action: this.$route.query.action,
            submitApi: this.$route.query.action === 'edit' ? updateTeacher : addTeacher,
            submitMsg: this.$route.query.action === 'edit' ? '编辑成功' : '添加成功',
            schoolInfo: {}
        }
    },
    created() {
        this.geSchoolInfo()
        if (this.$route.query.action === 'edit') {
            this.getDetail()
        } else {
            this.resetForm()
        }
    },
    methods: {
        geSchoolInfo() {
            geSchoolInfo({}).then(res => {
                if (res.code == 1) {
                    this.schoolInfo = res.data
                }
            })
        },
        getDetail() {
            getTeacherDetail({
                id: this.id
            }).then(res => {
                if (res.code == 1) {
                    let data = res.data
                    this.ruleForm.name = data.name
                    this.ruleForm.realname = data.realname
                    this.ruleForm.phone = data.phone
                    this.ruleForm.type = data.type.toString()
                    this.ruleForm.state = data.state.toString()
                    this.ruleForm.role = data.role.toString()
                }
            })
        },
        async submitForm(formName) {
            let _self = this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let data = {
                        name: _self.ruleForm.name,
                        password: _self.ruleForm.password,
                        realname: _self.ruleForm.realname,
                        phone: _self.ruleForm.phone,
                        type: _self.ruleForm.type,
                        state: _self.ruleForm.state,
                        role: _self.ruleForm.role
                    }
                    if (this.action === 'edit') {
                        data.id = this.$route.query.id
                    }
                    this.submitApi(data).then(res => {
                        if (res.code == 1) {
                            _self.$message({
                                message: this.submitMsg,
                                type: 'success'
                            })
                            _self.$router.push({
                                path: '/teacherList'
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        },
        resetForm() {
            this.ruleForm.name = ''
            this.ruleForm.password = ''
            this.ruleForm.realname = ''
            this.ruleForm.phone = ''
            this.ruleForm.type = ''
            this.ruleForm.state = ''
            this.ruleForm.role = ''
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        }
    },
    components: {
        Header,
        SideNav
    }
}

</script>
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    html,
    body {
        height: 100%
    }

    .add-title {
        height: 70px;
        line-height: 70px;
        padding-left: 30px;

        img {
            height: 20px;
            width: 20px;
            position: relative;
            top: 4px;
            margin-right: 12px;
        }

        span {
            font-size: 20px;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
        }
    }

    .add-form-container {
        width: calc(100% - 60px);
        margin: auto;
        border: 1px solid rgba(221, 223, 230, 1);

        .add-form {
            width: 500px;
            margin: auto;
            margin-top: 30px;
        }

        .el-select {
            width: 100%
        }
    }

</style>
<style lang="less">
    .left-container {
        ul {
            background-color: #22345E
        }
    }

    .btn-group {
        >div {
            text-align: center
        }
    }

    .date-line {
        text-align: center !important
    }

    // 下拉选
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #55a8fd !important;
        color: #ffffff !important;
    }

    .el-select-dropdown__list {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        font-size: 14px !important;
        font-family: PingFang-SC-Regular !important;
        font-weight: 400;
    }

    .popper__arrow {
        display: none !important;
    }

    // 日历
    .el-picker-panel__body {
        font-family: PingFang-SC-Regular !important;
    }

    @import url('../../src/assets/less/override-element-ui.less');

</style>
